<#include "fragment/common.ftl"/>
<#include "fragment/search_table.ftl"/>

<@html style="margin:0px 30px;padding:0px 30px">
  
<h3>${user.username} &nbsp; ${user.nickname}&nbsp; Welcome!</h3>
  
<#if isAdminUser = "Y">

  <div id="app">
		<div data-bind='component: {name: "banner"}'></div>
		 <div style="margin:10px"> </div>	
		<ul class="nav nav-tabs">

		  <li role="presentation" class="active"><a href="#import" data-toggle="tab">Import Expense</a></li>
  
		  <li role="presentation"><a href="#download" data-toggle="tab">Download Expense</a></li>
		  <li role="presentation"><a href="#upload" data-toggle="tab">Upload Expense</a></li>

		  
		  <li role="presentation"><a href="#sync" data-toggle="tab">Synchronize Expense</a></li>		  
		  <li role="presentation"><a href="#expense" data-toggle="tab">Verify Expense</a></li>
		 </ul>
		
		<div class="tab-content">
		   	
		   <div style="margin:10px"> </div>		
		   	     
	  
		   <div class="tab-pane fade in active" id="import">
			 						
				<form  role="form"  style="margin:10px;padding:10px" method="POST" action="/expense/importall" target="_blank">
						
				      <div class="form-group row">
					  		<div class="col-sm-5"><h3>Import expense data from Ali Cloud server</h3></div>
					  </div>
					  
					  <div class="form-group row">
					  		<div class="col-sm-2">Staff Id</div>
					  	    <div class="col-sm-3"><input type="input" name="staffId"></input></div>	
					  </div>
					  <div class="form-group row">
					  		<div class="col-sm-2">Expense Id</div>
					  	    <div class="col-sm-3"><input type="input" name="expenseId"></input></div>	
					  </div>
					  <div class="form-group row">
					  		<div class="col-sm-2">Project Id</div>
					  	    <div class="col-sm-3"><input type="input" name="projectId"></input></div>	
					  </div>
					  
                      <div class="form-group row">
                            <div class="col-sm-2">Submission Date (yyyy-MM-dd)</div>
                            <div class="col-sm-3"><input type="input" name="submittedDate"></input></div> 
                      </div>
                      
					  <div class="form-group row">
					  		<div class="col-sm-2">Status</div>
					  	    <div class="col-sm-3"><input type="hidden" name="status" value="1"></input>Pending Approval</div>
					  	    <input type="hidden" name="level" value="detail"></input>	
					  </div>
					  
					  <div class="form-group row">					  			    	
					    	<div class="col-sm-3"><input type="submit" value="Import"/></div>
					  </div>
					  
					  <div class="form-group row">					  			    	
					    	<div class="col-sm-3"><h5>Note: Please use Download and Upload instead if Import failed due to proxy issue</h5></div>
					  </div>
				</form>	
		   </div>
  
		   <div class="tab-pane fade" id="download">
			 						
				<form  role="form"  style="margin:10px;padding:10px" method="GET" action="${downloadUrl}" target="_blank">
						
				      <div class="form-group row">
					  		<div class="col-sm-5"><h3>Download data from Ali Cloud server</h3></div>
					  </div>
					  
					  <div class="form-group row">
					  		<div class="col-sm-2">Staff Id</div>
					  	    <div class="col-sm-3"><input type="input" name="staffId"></input></div>	
					  </div>
					  <div class="form-group row">
					  		<div class="col-sm-2">Expense Id</div>
					  	    <div class="col-sm-3"><input type="input" name="expenseId"></input></div>	
					  </div>
					  <div class="form-group row">
					  		<div class="col-sm-2">Project Id</div>
					  	    <div class="col-sm-3"><input type="input" name="projectId"></input></div>	
					  </div>
					  
					  <div class="form-group row">
                            <div class="col-sm-2">Submission Date (yyyy-MM-dd)</div>
                            <div class="col-sm-3"><input type="input" name="submittedDate"></input></div> 
                      </div>
                      
					  <div class="form-group row">
					  		<div class="col-sm-2">Status</div>
					  	    <div class="col-sm-3"><input type="hidden" name="status" value="1"></input>Pending Approval</div>	
					  	    <input type="hidden" name="level" value="detail"></input>
					  </div>
					  
					  <div class="form-group row">					  			    	
					    	<div class="col-sm-3"><input type="submit" value="Download"/></div>
					  </div>
				</form>	
		   </div>
		   		   
		   <div class="tab-pane fade" id="upload">
			 					    
			   	<form  role="form"  style="margin:10px;padding:10px" method="POST" action="/expense/uploadall" enctype="multipart/form-data" target="_blank"> 
						
					<div class="form-group row">
					  		<div class="col-sm-5"><h3>Upload data to Snapex server</h3></div>
					  </div>
					  				
					<div class="form-group row">
					  	    <div class="col-sm-5"> 
					    		<input type="file" name="expense"/>
					    	</div>	
					  </div>
					  
					  <div class="form-group row">					  			    	
					    	<div class="col-sm-3"><input type="submit" value="Upload"/></div>
					  </div>
				</form>	
			
			</div>
			 
		   
		    <div class="tab-pane fade" id="sync">
		    	
		    				    
			   	<form  role="form"  style="margin:10px;padding:10px" method="POST" action="/expense/sync" target="_blank" > 
										
					  <div class="form-group row">
					  		<div class="col-sm-5"><h3>Synchronize data from Snapex to e-Expense</h3></div>					    	
					  </div>
					   <div class="form-group row">
					  		<div class="col-sm-2">Staff Id</div>
					  	    <div class="col-sm-3"><input type="input" name="staffId"></input></div>	
					  </div>
					  <div class="form-group row">
					  		<div class="col-sm-2">Expense Id</div>
					  	    <div class="col-sm-3"><input type="input" name="expenseId"></input></div>	
					  </div>
					  <div class="form-group row">
					  		<div class="col-sm-2">Project Id</div>
					  	    <div class="col-sm-3"><input type="input" name="projectId"></input></div>	
					  </div>
					  <div class="form-group row">
					  		<div class="col-sm-2">Status</div>
					  	    <div class="col-sm-3"><input type="hidden" name="status" value="1"></input>Pending Approval</div>	
					  </div>
					  <div class="form-group row">					  			    	
					    	<div class="col-sm-3"><input type="submit" value="Synchronize"/></div>
					  </div>
				</form>						
		    </div>
		   
		   <div class="tab-pane fade" id="expense">
		     
		     <#--
			 <table data-toggle="table" id="expense-tbl" data-url="/expense/all">
			    <thead>
			        <tr>
			          <th data-field="description">Title</th>
			          <th data-field="expenseId">No.</th>
				      <th data-field="status">Status</th>	
				      <th data-field="staffId">Staff Id</th>	
				      <th data-field="extensionNo">Extension No.</th>				      
				      <th data-field="nextApprover">Next Approver</th>
				      <th data-field="lastApprover">Last Approver</th>
				      <th data-field="siteId">Site</th>
				      <th data-field="submittedDate">Submitted Date</th>
				      <th data-field="confirmedDate">Confirmed Date</th>
				      <th data-field="clarityProjectId">Project Id</th> 
				      <th data-field="clarityProjectName">Project Name</th>
				      <th data-field="customerCostCentreName">Cost Centre Name</th>
				      <th data-field="customerCostCentreNo">Cost Centre No</th>
				      <th data-field="customerCostCentreMandatory">Cost Centre Mandatory</th>   
				      <th data-field="billable">Billable</th>
				      <th data-field="totalAmount">Total Amount</th>
				      <th data-field="expenseCashAdvanceAmount">Cash Advance Amount</th>				      				      					      			      
			        </tr>
			    </thead>
			</table>
			-->
				<@koExtenders/>
				<@search_table_demo/>	 			
		   </div>
		</div>
			    
    <script type="text/javascript">    
	    
    	
	    var StatusOption = function(value,label){
	    	this.value = value;
	    	this.label = label;    	
	    }
	    
	    var viewModel = {
 	        statusOptions : ko.observableArray([new StatusOption("0","Draft"),new StatusOption("1","Pending")])
	        
	        ,shouldShowExpenseDetail: ko.observable(false)
	        
	        ,search : function() {
	            this.shouldShowExpenseDetail(false);
	        }
	       
	    	,searchData: function() {
	            this.shouldShowData(true);
	        }        
	    };	    
	    	    
	    $("#expense-tbl").on('click-row.bs.table', function (tr,data, field) {	       	  
	       viewModel.shouldShowExpenseDetail(true);
	       //viewModel.expenseForm(data);
	    });

	    ko.applyBindings(viewModel);
	</script>
	
<#else>
You are not authorized to access this resource.
</#if>  	
</@>
